<template>
  <!-- <div class="footer-mountains"></div> -->
  <main>
    <home-header />
    <!-- ************ -->
    <div class="content">
      <router-view />
    </div>
  </main>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onErrorCaptured,
} from 'vue';
import { HomeHeader } from '@/components';
import axios from 'axios';
// import BScroll from 'better-scroll';

export default defineComponent({
  name: 'App',
  components: {
    [HomeHeader.name]: HomeHeader,
  },
  setup() {
    const scroll = ref<any>(null);
    onBeforeMount(async () => {
      const oData = await axios.get('https://ipapi.co/json/');
      if (oData.status === 200) {
        console.log('oData: ', oData.data);
      }
    });
    onMounted(() => {
      // scroll.value = new BScroll('.content', {
      //   scrollY: true,
      //   click: true,
      // });
    });

    const oError = ref<any>(null);
    onErrorCaptured((e: any) => {
      oError.value = e;
      // 钩子函数要求我们返回一个布尔值，代表错误是否向上传递。
      return true;
    });
    return {
      oError,
      scroll,
    };
  },
});
</script>
